<template>
  <div class="screen-block">
    <div class="screen-wrap">
      <div class="map_bg"></div>
      <div class="circle_allow"></div>
      <div class="circle_bg"></div>

      <div class="map_title">
        <p>全国淘宝主播数量：</p>
        <div className="databg">6</div>
        <div className="databg">6</div>
        <div className="databg">6</div>
        <div className="databg">6</div>
        <div className="databg">6</div>
        <div className="databg">6</div>
        <div className="databg">6</div>
        <div className="databg">6</div>
        <div className="databg">6</div>
      </div>
      <div class="map_top_bg">
        <Decoration1 />
      </div>
      <div id="mainMap" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import { init, EChartsOption } from 'echarts';
import geoJson from './china.json';
import { Decoration1 } from '@kjgl77/datav-vue3';
const initalECharts4 = () => {
  const myChart = init(document.getElementById('mainMap') as HTMLDivElement);

  echarts.registerMap('china', { geoJSON: geoJson });
  let option: EChartsOption = {
    tooltip: {
      trigger: 'item',
    },
    visualMap: {
      // orient: 'horizontal',
      min: 0,
      left: '20%',
      max: 10000,
      text: ['高', '低'], // 文本，默认为数值文本
      splitNumber: 0,
      color: ['#0054bb', '#85ADDE'],
      textStyle: {
        color: '#c3dbff',
      },
    },
    series: [
      {
        name: '2011全国GDP分布',
        type: 'map',
        map: 'china',
        // mapLocation: {
        //   x: 'left',
        // },
        // selectedMode: 'multiple',
        label: { show: true, color: '#fff' },
        itemStyle: {
          borderWidth: 0,
        },

        data: [
          { name: '西藏', value: 700 },
          { name: '青海', value: 1670.44 },
          { name: '宁夏', value: 2102.21 },
          { name: '海南', value: 2522.66 },
          { name: '甘肃', value: 5020.37 },
          { name: '贵州', value: 5701.84 },
          { name: '新疆', value: 6610.05 },
          { name: '云南', value: 22 },
          { name: '重庆', value: 500 },
          { name: '吉林', value: 1000 },
          { name: '山西', value: 5000 },
          { name: '天津', value: 4000 },
          { name: '江西', value: 9000 },
          { name: '广西', value: 689 },
          { name: '陕西', value: 9982 },
          { name: '黑龙江', value: 12582 },
          { name: '内蒙古', value: 14359.88 },
          { name: '安徽', value: 22 },
          { name: '北京', value: 800 },
          { name: '福建', value: 1223 },
          { name: '上海', value: 19195.69 },
          { name: '湖北', value: 537 },
          { name: '湖南', value: 8872 },
          { name: '四川', value: 21026.68 },
          { name: '辽宁', value: 22226.7 },
          { name: '河北', value: 24515.76 },
          { name: '河南', value: 26931.03 },
          { name: '浙江', value: 32318.85 },
          { name: '山东', value: 45361.85 },
          { name: '江苏', value: 49110.27 },
          { name: '广东', value: 53210.28 },
          { name: '台湾', value: 53210.28 },
          { name: '南海诸岛', value: 53210.28 },
        ],
      },
    ],
  };
  myChart.setOption(option);
};
onMounted(() => {
  initalECharts4();
});
</script>

<style lang="scss" scoped>
.screen-block {
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 15px;
  .screen-wrap {
    padding: 15px;
    height: 100%;
    background-size: 100% 100%;
    box-sizing: border-box;
    position: 'relative';
  }
  .map_bg {
    position: absolute;
    top: 54%;
    left: 50%;
    width: 45.8vh;
    height: 45.8vh;
    min-width: 280px;
    min-height: 280px;
    transform: translate(-50%, -50%);
    background: url('../../img/map.png') center no-repeat;
    background-size: 45.8vh 45.8vh;
    opacity: 0.5;
  }
  .circle_allow {
    position: absolute;
    top: 54%;
    left: 50%;
    width: 50vh;
    height: 50vh;
    min-width: 280px;
    min-height: 280px;
    transform: translate(-50%, -50%);
    background: url('../../img/jt.png') center no-repeat;
    background-size: 50vh 50vh;
    animation: retate2 10s linear infinite;
  }

  .circle_bg {
    position: absolute;
    top: 54%;
    left: 50%;
    width: 52vh;
    height: 52vh;
    transform: translate(-50%, -50%);
    background: url('../../img/lbx.png') center no-repeat;
    background-size: 52vh 52vh;
    animation: rotate1 10s linear infinite;
    opacity: 0.4;
  }

  @keyframes rotate1 {
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes retate2 {
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  .map_title {
    width: 100%;
    position: absolute;
    top: 10px;
    display: flex;
    left: 50%;
    justify-content: center;
    color: rgb(255, 255, 255);
    align-items: center;
    transform: translateX(-50%);
  }
  .databg {
    background: url('../../img/databg.png') 0 0 no-repeat;
    background-size: 22px 30px;
    height: 30px;
    width: 22px;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
  }
  .map_top_bg {
    height: 60px;
    width: 200px;
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
</style>
